<route lang="json">
{
  "meta": {
    "title": "t('pai-hang-bang')"
  }
}
</route>
<script lang="ts" setup>
import { _require } from "@@/utils/tools";
import { apiRankingList, ApiRankingList } from "@@/api/wk/index";
import {
  fixedDecimals,
  omitText,
  numThousand,
  fixedNumber,
} from "@@/utils/tools/format";
import { StateType } from "@@/components/common/ClistState";

const state = ref<StateType>("next");
const rankingList = ref<ApiRankingList.Data>();
async function getRankingList() {
  state.value = "loading";
  const res = await apiRankingList();
  if (!res) return (state.value = "error");
  rankingList.value = res;
  if (!rankingList.value.rankList.length) state.value = "null";
}
getRankingList();
</script>
<template>
  <CpageView>
    <div class="auto-MT-md">
      <Ccard class="fill PL-xs PR-xs">
        <Cgrid class="T-A-C" col="1fr auto 1fr">
          <div>
            <h2>
              <span class="T-S-sm" style="vertical-align: super">$</span>
              {{ numThousand(fixedDecimals(rankingList?.my.money, 2)) }}
            </h2>
            <div class="MT-xs T-S-sm C-T3">{{ $t("woDeLeiJiShouYi") }}</div>
          </div>
          <VanDivider vertical style="height: 100rem" />
          <div>
            <h2>
              <span class="T-S-sm" style="vertical-align: super">NO</span>
              {{ numThousand(rankingList?.my.rank || "--") }}
            </h2>
            <div class="MT-xs T-S-sm C-T3">{{ $t("pai-hang-bang") }}</div>
          </div>
        </Cgrid>
      </Ccard>

      <Ccard class="list T-S-sm">
        <Cgrid class="list-header" col="3" repeat="1fr" :justify="'start'">
          <div>{{ $t("paiMing") }}</div>
          <div>{{ $t("diZhi") }}</div>
          <div>{{ $t("shouYi") }}</div>
        </Cgrid>
        <Cgrid
          class="list-item"
          v-for="(item, i) in rankingList?.rankList"
          col="3"
          repeat="1fr"
          :justify="'start'"
        >
          <div>
            <Rimage
              v-if="i < 3"
              size="48rem"
              :src="_require(`src/assets/images/icon/number${i + 1}.svg`)"
            />
            <div v-else>{{ fixedNumber(i + 1, 2) }}</div>
          </div>
          <div>{{ omitText(item.address) }}</div>
          <div>{{ fixedDecimals(item.money) }}</div>
        </Cgrid>
        <ClistState :type="state" />
      </Ccard>
    </div>
  </CpageView>
</template>
<style lang="scss" scoped>
.list-item {
  padding: var(--gap-sm) 0;
  border-bottom: solid 1rem var(--C-T1-O1);
}
</style>
